<template>
    <div class="settings">
      <div class="header">
        <div class="back" @click="goBack">
            <van-icon name="arrow-left" class="home-icon" />
          </div>
        <div class="title">Settings</div>
      </div>
      
      <div class="menu-list">
        <van-cell 
          class="menu-item"
          is-link
          @click="navigateTo('Password')"
        >
          <template #icon>
            <div class="icon-wrapper lock-icon">
              <van-icon name="lock" class="icon" />
            </div>
          </template>
          <span>Login Password</span>
        </van-cell>
        
        <van-cell 
          class="menu-item"
          is-link
          @click="navigateTo('FundPassword')"
        >
          <template #icon>
            <div class="icon-wrapper fund-icon">
              <van-icon name="shield-o" class="icon" />
            </div>
          </template>
          <span>Fund Password</span>
        </van-cell>
        
        <van-cell 
          class="menu-item"
          is-link
          @click="navigateTo('Language')"
        >
          <template #icon>
            <div class="icon-wrapper language-icon">
              <van-icon name="exchange" class="icon" />
            </div>
          </template>
          <span>Language</span>
        </van-cell>
      </div>
      
      <van-button 
        class="logout-btn"
        type="primary"
        block
        @click="handleLogout"
      >
        Logout
      </van-button>
    </div>
  </template>
  
  <script setup name="Settings">
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { Cell, Icon, Button } from 'vant';
  import { useUserStore } from "@/stores/user";
  const userStore = useUserStore();
  
  const router = useRouter();
  
  const goBack = () => {
    router.go(-1);
  };
  
  const navigateTo = (routeName) => {
    router.push({ name: routeName });
  };
  
  const handleLogout = () => {
    // Implement logout logic here
    console.log('Logout clicked');
    userStore.clear();
    router.push('/login');
  };
  </script>
  
  <style scoped>
  .settings {
    height: 100vh;
    background: #f5f5f5;
  }
  
  .header {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f5f5f5;
    position: relative;
  }
  
  .back {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  .home-icon {
    width: 22px;
    height: 22px;
    font-weight: bold;
    margin-top: 6px;
  }
  
  .title {
    font-size: 16px;
    font-weight: 600;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }
  
  .menu-list {
    padding: 10px;
  }
  
  .menu-item {
    display: flex;
    align-items: center;
    background: white;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 12px;
  }
  
  .icon-wrapper {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .lock-icon {
    color: #1989fa;
  }
  
  .fund-icon {
    color: #07c160;
  }
  
  .language-icon {
    color: #ff976a;
  }
  
  .logout-btn {
    margin: 20px 12px;
    padding: 15px;
    background: linear-gradient(90deg, #4460F6, #4C6FFF);
    color: #fff;
    text-align: center;
    border-radius: 25px;
    font-size: 15px;
    cursor: pointer;
    width: calc(100% - 24px);
    margin-top: 0;
  }
  :deep(.van-icon){
    font-size: 16px;
  }
  </style>